<!--
 * @Author: qf
 * @Date: 2021-05-20 15:49:25
 * @LastEditTime: 2021-07-28 14:21:42
 * @LastEditors: maoyu
 * @Description:
-->
<template>
  <div>
    <el-input v-model="filterText" clearable placeholder="请输入姓名" @input="filterInput" />
    <el-row class="m-t-20">
      <el-row v-if="curData.length">
        <el-row v-for="item in curData" :key="item.indexKey" :gutter="20">
          <el-col :span="6">
            <el-checkbox v-model="item.checkAll" :disabled="disabledAll" @change="handleCheckAll($event, item)">{{
              item.indexKey
            }}</el-checkbox>
          </el-col>
          <el-col :span="18">
            <el-checkbox-group v-model="item.checkedItemIds" :max="2">
              <el-checkbox
                v-for="subItem in item.childrenList"
                :key="subItem.userId"
                :label="subItem.userId"
                :disabled="disabled"
                @change="change($event, subItem.userId)"
              >{{ subItem.realName }}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </el-row>
      <el-row v-else> 暂无结果 </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
    disabled: { // 选项只读
      type: Boolean,
      default: false
    },
    disabledAll: { // 全选只读
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      filterText: '',
      tempData: []
    }
  },
  computed: {
    curData() {
      return this.filterText === '' ? this.data : this.tempData
    }
  },
  watch: {
    data: {
      deep: true,
      handler(val) {
        if (this.filterText && this.filterText !== '') {
          this.filterTempData(this.filterText)
        }
      }
    }
  },
  methods: {
    clearFilterText() {
      this.filterText = ''
    },
    filterInput(val) {
      if (val && val !== '') {
        this.filterTempData(val)
      } else {
        this.tempData = []
      }
    },
    filterTempData(val) {
      let arr = []
      let data = this.$deepClone(this.data)
      data.forEach(item => {
        item.childrenList.forEach(subItem => {
          if (subItem.realName.includes(val)) {
            let obj = item
            obj.childrenList = item.childrenList.filter(userItem => userItem.realName.includes(val))
            arr.push(obj)
          }
        })
      })
      arr.forEach(item => {
        let ids = item.childrenList.map(userItem => userItem.userId)
        item.checkedItemIds.forEach((userId, idIndex) => {
          if (!ids.includes(userId)) {
            item.checkedItemIds.splice(idIndex, 1)
          }
        })
        item.checkAll = this.getCheckAllStatus(item)
      })
      this.tempData = arr
    },
    /**
     * @description: 全选
     * @param {Boolean} checkedAll
     * @param {*} curItem 当前项
     * @return {*}
     */
    handleCheckAll(checkedAll, curItem) {
      let checkedItemIds = this.getCheckedItemIds(curItem)
      curItem.checkedItemIds = checkedAll ? checkedItemIds : []
      if (this.filterText && this.filterText !== '') {
        this.handleTempData(checkedAll, checkedItemIds)
      }
      this.$emit('checked-all', { checkedAll, checkedItemIds })
    },
    /**
     * @description: 当绑定值变化时触发的事件
     * @param {*} checked
     * @param {*} userId
     * @return {*}
     */
    change(checked, userId) {
      if (this.filterText !== '') {
        this.handleTempData(checked, [userId])
      }
      this.$emit('change', { checked, userId })
    },
    handleTempData(checked, ids) {
      this.tempData.forEach(item => {
        item.childrenList.forEach(subItem => {
          if (ids.includes(subItem.userId)) {
            if (checked) {
              item.checkedItemIds.push(subItem.userId)
              item.checkedItemIds = Array.from(new Set(item.checkedItemIds))
            } else {
              let index = item.checkedItemIds.findIndex(checkedId => checkedId === subItem.userId)
              item.checkedItemIds.splice(index, 1)
            }
          }
        })
        item.checkAll = this.getCheckAllStatus(item)
      })
    },
    getCheckedItemIds(item) {
      return item.childrenList.map(item => item.userId)
    },
    getCheckAllStatus(item) {
      return item.checkedItemIds.length >= item.childrenList.length
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
